<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <h1>The Ajax 01 Page <strong id="timeId"></strong></h1>
 <div>
   <!-- 传统方式的同步请求测试 -->
   <fieldset> <!-- 分组设置 -->
     <legend>传统方式的同步请求</legend> <!-- 设置分组名称 -->
     <button  onclick="doGet()">Get Request</button>
     <span id="resultId">[[${message}]]</span>
   </fieldset>
   
   <!-- Ajax方式的异步请求测试 -->
   <fieldset> <!-- 分组设置 -->
     <legend>异步请求</legend>
     <button onclick="doAjaxGet()">Get Request</button>
     <span id="ajaxResultId">loading data ....</span>
   </fieldset>
   
   <script type="text/javascript">
     //scirpt只要被加载就会执行
     document.getElementById("timeId").innerHTML=new Date().toLocaleString()
     function doGet(){
    	 location.href="http://localhost/doGet";
     }
     //Ajax方式的qingqiu
     function doAjaxGet(){//错误调试:debugger,console.log(),排除法
    	 //1.创建XHR对象
    	 var xhr=new XMLHttpRequest();
    	 //2.设置状态监听(将服务端响应的结果更新到ajaxResultId位置)
    	 xhr.onreadystatechange=function(){
    		 //console.log(xhr.readState);
    	     if(xhr.readyState==4&&xhr.status==200){
    	          console.log(xhr.responseText);
    	          document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
    	     }
    	};
    	 //3.建立连接
      	xhr.open("GET","http://localhost/doAjaxGet",true);//true表示异步(底层会启动线程与服务端通讯)
    	 //4.发送请求
    	xhr.send();
     }
     
   </script>
 </div>
</body>
</html>

